Cascading Style Sheets |
|
Process Platform XForms use cascading style sheets to define interfaces. Using style sheets enables you to separate presentation from the content in an XForm. You can use a single style sheet for multiple XForms, and also use multiple style sheets for a single XForm.
Cascading style sheets are easy to maintain and use. On editing a CSS, the changes immediately reflect it on all the pages associated with the CSS.
In addition to the style sheets available in Process Platform XForms, you can define and use custom style sheets. To create a custom style sheet, use the availabledefault.cssfile as a template, and edit it as required. Ensure that you maintain the cascade order while editing it.
Cascading style sheets apply to an XForm in the following order:
- default.css
- xdefault.css
- <custom style sheet>.css
Here, the custom style sheet overrides the styles applied bydefault.cssandxdefault.css.
Style sheets in Process Platform applications must use a specified set of selectors to define the interface.
Types of Selectors
The selectors are distributed among default.css and xdefault.css.
The selectors used in style sheets are classified as follows:
Table 1. Selector Types used in Style Sheets
Type of Selector |
Description |
|---|---|
Type |
Comprises selectors for rendering basic HTML elements |
Presentational |
Comprises selectors for defining decorative elements like borders, background and foreground colors, fonts, and images. Mostly found in default.css. |
Structural |
Comprises selectors for interface elements, but does not define appearance. Mostly found in template style sheets. |
Basic UI |
Comprises selectors for creating basic interface elements in XForms. Found in xdefault.css, and some template style sheets. |